<template>
  <div id="order">
    <div class="order-top">
      <div class="form-group">
        <span class="spanRed">*</span>供应商：
        <el-input style="width: 150px" v-model="proName"></el-input>
        <el-button @click="dialogShow = true">...</el-button>
      </div>
      <div class="form-group">
        业务员：
        <el-select
          v-model="value"
          placeholder="业务员"
          style="margin-left: 10px; width: 100px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="form-group">
        交货方式:
        <el-select
          v-model="value"
          placeholder="交货方式"
          style="margin-left: 10px; width: 110px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="form-group">
        <span class="demonstration">单据日期:</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          style="margin-left: 10px"
        >
        </el-date-picker>
      </div>
      <div class="form-group">
        <span class="demonstration">报价截止日期:</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          style="margin-left: 10px"
        >
        </el-date-picker>
      </div>
      <div class="form-group">
        <i class="el-icon-paperclip" style="color: blue"></i>
        <span style="color: blue">上传附件</span>
        <span style="margin-left: 10px">单据编号:</span>
        <el-input
          style="width: 120px; margin-left: 10px; margin-right: 20px"
          placeholder=""
          v-model="input"
          clearable
        >
        </el-input>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-edit"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>SKDYYYYMMDD</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-divider></el-divider>
    <div style="float: right; margin-bottom: 10px">
      <el-button type="primary">保存并新增</el-button>
      <el-button type="primary">保存</el-button>
      <el-button type="primary">导入</el-button>
    </div>

    <div class="order-content">
      <el-table
        :data="accounts"
        border
        style="width: 100%; font-size: 13px; margin-left: 20px"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="选中" width="50">
          <template slot-scope="scope">
            <el-radio v-model="selectedRow" :label="scope.row.id">{{
              a
            }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="accountCode" label="商品" width="300">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-input
              style="width: 200px"
              placeholder="商品"
              v-model="scope.row.accountCode"
            ></el-input
            ><el-button @click="dialogVisible2 = true">选择</el-button>
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            {{ scope.row.productImage }}
          </template>
        </el-table-column>

        <!-- 品牌 -->
        <el-table-column label="品牌" width="120">
          <template slot-scope="scope">
            {{ scope.row.brand }}
          </template>
        </el-table-column>

        <!-- 商品备注 -->
        <el-table-column label="商品备注" width="200">
          <template slot-scope="scope">
            {{ scope.row.productRemark }}
          </template>
        </el-table-column>

        <!-- 属性 -->
        <el-table-column label="属性" width="200">
          <template slot-scope="scope">
            {{ scope.row.attributes }}
          </template>
        </el-table-column>

        <!-- 单位 -->
        <el-table-column label="单位" width="100">
          <template slot-scope="scope">
            <el-select v-model="scope.row.unit" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 仓库 -->
        <el-table-column label="仓库" width="320">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="dialogVisible3 = true"
            ></el-button>
            <el-select v-model="scope.row.warehouse" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 可用库存 -->
        <el-table-column label="可用库存" width="120">
          <template slot-scope="scope">
            {{ scope.row.availableStock }}
          </template>
        </el-table-column>

        <!-- 数量 -->
        <el-table-column label="数量" width="130">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-input
              style="width: 100px"
              placeholder="商品"
              v-model="scope.row.quantity"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 整件散包 -->
        <el-table-column label="整件散包" width="120">
          <template slot-scope="scope">
            {{ scope.row.packType }}
          </template>
        </el-table-column>

        <!-- 基本单位 -->
        <el-table-column label="基本单位" width="120">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>

        <!-- 基本数量 -->
        <el-table-column label="基本数量" width="120">
          <template slot-scope="scope">
            {{ scope.row.baseQuantity }}
          </template>
        </el-table-column>

        <!-- 交货日期 -->
        <el-table-column label="报价截止日期" width="120">
          <template slot-scope="scope">
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="scope.row.deliveryDate"
              style="margin-left: 10px"
            >
            </el-date-picker>
          </template>
        </el-table-column>

        <!-- 购货单价 -->
        <el-table-column label="购货单价" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.purchasePrice" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 含税单价 -->
        <el-table-column label="含税单价" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.taxIncludedPrice"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 折扣率 -->
        <el-table-column label="折扣率(%)" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.discountRate"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 折扣 -->
        <el-table-column label="折扣(折)" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.discount"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 折扣额 -->
        <el-table-column label="折扣额" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.discountAmount"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 金额 -->
        <el-table-column label="金额" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.amount"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 税率 -->
        <el-table-column label="税率(%)" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.taxRate"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 税额 -->
        <el-table-column label="税额" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.taxAmount"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 价税合计 -->
        <el-table-column label="价税合计" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.totalWithTax"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 备注 -->
        <el-table-column label="备注" width="120">
          <template slot-scope="scope">
            <el-input
              style="width: 90px"
              placeholder="商品"
              v-model="scope.row.remark"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-input
        type="textarea"
        placeholder="备注"
        rows="2"
        v-model="text"
        style="width: 100%; margin: 10px 0 0 10px"
      >
      </el-input>
    </div>

    <div style="float: right; margin-top: 10px">
      <el-button @click="goto('purInqDoc')">历史单据</el-button>
    </div>

    <el-dialog top="20px" title="选择供应商" :visible.sync="dialogShow">
      <ProviderChoose ref="choosePro" :dialogShow="dialogShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
      <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsShow = false">取 消</el-button>
        <el-button type="primary" @click="yesGoods">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="商品库存查询" :visible.sync="dialogVisible3" width="30%">
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="closeDialog3">关闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import ProviderChoose from '../public_com/ProviderChoose.vue';
import GoodsChoose from '../public_com/GoodsChoose.vue';

export default {
  name: "order",
  components: {
    ProviderChoose,
    GoodsChoose
  },
  data() {
    return {
      dialogShow:false,
      goodsShow:false,
      dialogVisible3:false,
      proName:'',
    };
  },
  methods: {
    
  },
  created(){
    
  }
};
</script>

<style scoped>
#order {
  width: 100%;
  height: 100%;
}

.order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% - 20px);
  padding-left: 20px;
  font-size: 13px;
}

.custom-radio .el-radio__label {
  display: none;
}

.form-group {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 组间距 */
  margin-top: 10px;
}

.el-autocomplete-suggestion__item {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-content {
  width: 100%;
}

.spanRed {
  color: rgb(255, 98, 93);
  margin-right: 8px;
}

.el-input,
.el-button {
  font-size: 13px;
}

.el-select,
.el-date-picker {
  margin-left: 10px;
}
</style>